<template>
  <div id="app">
    <header class="header">
      <h1>Vue Virtual Scroll</h1>
      <p>一个基于 Vue3 + TypeScript 的虚拟滚动组件</p>
    </header>

    <main class="main">
      <!-- <section class="demo-section">
        <h2>列表布局 - Transform 方案</h2>
        <VirtualScrollList
          :items="items"
          :item-height="50"
          :container-height="400"
        />
      </section> -->

      <!-- <section class="demo-section">
        <h2>列表布局 - 简化版本</h2>
        <VirtualScrollList2
          :items="items"
          :item-height="50"
          :container-height="400"
        />
      </section> -->

      <section class="demo-section">
        <h2>Grid 布局 - 4列</h2>
        <VirtualGridList
          :items="items"
          :item-height="120"
          :container-height="400"
          :columns="4"
          :gap="0"
          :padding="0"
        >
          <template #default="{ item, index }">
            <div class="grid-item-content">
              <div class="item-number">{{ index + 1 }}</div>
              <div class="item-text">{{ item.text }}</div>
            </div>
          </template>
        </VirtualGridList>
      </section>

      <section class="demo-section">
        <h2>横向滚动 Grid 布局 - 固定宽度</h2>
        <VirtualGridListHorizontal
          :items="items"
          :item-height="150"
          :item-width="200"
          :container-height="400"
          :container-width="800"
          :columns="100"
          :gap="10"
          :padding="10"
          :buffer-size="1"
        >
          <template #default="{ item, index, row, col }">
            <div class="grid-item-content">
              <div class="item-number">{{ index + 1 }}</div>
              <div class="item-text">{{ item.text }}</div>
              <div class="item-position">R{{ row }}C{{ col }}</div>
            </div>
          </template>
        </VirtualGridListHorizontal>
      </section>

      <section class="demo-section">
        <h2>横向滚动 Grid 布局 - 固定宽度-性能优化版本</h2>
        <VirtualGridListHorizontalPerformance
          :items="items"
          :item-height="150"
          :item-width="200"
          :container-height="400"
          :container-width="800"
          :columns="100"
          :gap="10"
          :padding="10"
          :buffer-size="1"
        >
          <template #default="{ item, index, row, col }">
            <div class="grid-item-content">
              <div class="item-number">{{ index + 1 }}</div>
              <div class="item-text">{{ item.text }}</div>
              <div class="item-position">R{{ row }}C{{ col }}</div>
            </div>
          </template>
        </VirtualGridListHorizontalPerformance>
      </section>

      <section class="demo-section">
        <h2>Excel 样式首行首列冻结 Grid 布局</h2>
        <VirtualGridListWithFrozenHeaders
          :items="items"
          :item-height="60"
          :item-width="120"
          :container-height="400"
          :container-width="800"
          :columns="50"
          :gap="1"
          :padding="8"
          :buffer-size="2"
          :show-header-row="true"
          :show-header-column="true"
          :header-row-height="40"
          :header-column-width="60"
        >
          <template #default="{ item, index, row, col }">
            <div class="grid-item-content small">
              <div class="item-number">{{ index + 1 }}</div>
              <div class="item-text">{{ item.text }}</div>
              <div class="item-position">R{{ row }}C{{ col }}</div>
            </div>
          </template>
          <template #header="{ col }">
            <div class="header-content">
              <div class="header-title">列 {{ col + 1 }}</div>
            </div>
          </template>
          <template #rowHeader="{ row }">
            <div class="row-header-content">
              <div class="row-number">{{ row + 1 }}</div>
            </div>
          </template>
        </VirtualGridListWithFrozenHeaders>
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import VirtualScrollList from "./components/VirtualScrollList.vue";
import VirtualScrollList2 from "./components/VirtualScrollList2.vue";
import VirtualGridList from "./components/VirtualGridList.vue";
import VirtualGridListHorizontal from "./components/VirtualGridListHorizontal.vue";
import VirtualGridListHorizontalPerformance from "./components/VirtualGridListHorizontalPerformance.vue";
import VirtualGridListWithFrozenHeaders from "./components/VirtualGridListWithFrozenHeaders.vue";

// 生成测试数据
const items = ref<Array<{ id: number; text: string }>>([]);

onMounted(() => {
  // 生成 10000 条测试数据
  items.value = Array.from({ length: 10000 }, (_, index) => ({
    id: index + 1,
    text: `列表项 ${index + 1}`,
  }));
});
</script>

<style scoped>
.header {
  text-align: center;
  padding: 2rem 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  margin-bottom: 2rem;
}

.header h1 {
  margin: 0 0 0.5rem 0;
  font-size: 2.5rem;
  font-weight: 700;
}

.header p {
  margin: 0;
  font-size: 1.1rem;
  opacity: 0.9;
}

.main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.demo-section {
  margin-bottom: 3rem;
}

.demo-section h2 {
  margin-bottom: 1rem;
  color: #333;
  font-size: 1.5rem;
  font-weight: 600;
}

.grid-item-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.item-number {
  font-size: 24px;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 8px;
}

.item-text {
  font-size: 12px;
  color: #666;
}

.item-position {
  font-size: 10px;
  color: #999;
  margin-top: 4px;
}

.grid-item-content.small .item-number {
  font-size: 18px;
}

.grid-item-content.small .item-text {
  font-size: 10px;
}

/* 表头样式 */
.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.header-title {
  font-size: 12px;
  font-weight: 600;
  color: #495057;
}

/* 行号样式 */
.row-header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.row-number {
  font-size: 12px;
  font-weight: 600;
  color: #495057;
}
</style>
